<script setup lang="ts">
//src\renderer\Component\BarLeft.vue
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
//菜单列表数组
let mainWindowRoutes = ref([
  {
    path: `/WindowMain/Home`,
    name: "首页",
    isSelected: true,
    icon: `icon-home`,
    iconSelected: `icon-home`,
  },
  {
    path: `/WindowMain/About`,
    name: "关于",
    isSelected: false,
    icon: `icon-about`,
    iconSelected: `icon-about`,
  },
]);
let route = useRoute();
//注册路由变化监听器
watch(
  () => route,
  () =>
    mainWindowRoutes.value.forEach(
      (v) => (v.isSelected = v.path === route.fullPath)
    ),
  {
    immediate: true,
    deep: true,
  }
);
</script>

<template>
  <div class="BarLeft">
    <div class="userIcon">
      <!-- <img src="../assets/avatar.jpg" alt="" /> -->
    </div>
    <div class="menu">
      <router-link
        v-for="item in mainWindowRoutes"
        :to="item.path"
        :class="[`menuItem`, { selected: item.isSelected }]"
      >
        {{ item.name }}
      </router-link>
    </div>
  </div>
</template>

<style>
.menu{
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 120px;
    line-height: 30px;
}
.menuItem {
  color: black;
}
.selected {
  color: blue;
}
</style>
